<template>
  <page-wrap hide-tab stay-still :title="'分享赚钱'" back need-login>
    <view class="container">
      <view class="header">
        <img :src="headerSrc" alt="" />
        <img :src="ruleImg" alt="" @click="handleRuleClick" class="ruleImg" />
        <img
          :src="myScoreImg"
          alt=""
          @click="handleMyScoreClick"
          class="myScoreImg"
        />
      </view>
      <view class="award">
        <view class="invContainer">
          <view class="invContent">
            <!-- <view class="title">
              <img :src="titleLeftSrc" alt="" class="titleIcon" />
              <span>活动奖励一</span>
              <img :src="titleRightSrc" alt="" class="titleIcon" />
            </view>
            <view class="bonus">
              <view v-for="(item,index) in shareConfig" :key="index" :class="{'bonusItem':true, 'bonusItem1':index==0,'bonusItem2':index==1,'bonusItem3':index==2}">
                <span class="bonusTop">
                  <span class="received" v-if="item.isReceive==1">已领取</span>
                  <span class="bonusNum" v-if="item.isReceive==0">{{item.rewardNum}}</span><span class="bonusYuan" v-if="item.isReceive==0">元</span>
                </span>
                <span class="bonusBottom" v-if="item.isReceive==0">{{item.desc}}</span>
              </view>
            </view> -->
            <!-- <view class="title">
              <img :src="titleLeftSrc" alt="" class="titleIcon" />
              <span>活动奖励二</span>
              <img :src="titleRightSrc" alt="" class="titleIcon" />
            </view> -->
            <view class="bonus2" @click="handleRuleClick"> </view>
            <button class="invButton" open-type="share"></button>
          </view>
        </view>
      </view>
      <!-- 邀请好友 -->

      <view class="score">
        <view class="scoreList">
          <view class="scoreItem">
            <span class="invScoreCount">{{ moneyInfo.inviteSubNum }}</span>
            <span class="invScoreTitle">邀请好友数</span>
          </view>
          <view class="scoreItem">
            <span class="invScoreCount">{{ moneyInfo.subOrderNum }}</span>
            <span class="invScoreTitle">好友订单数</span>
          </view>
          <view class="scoreItem">
            <span class="invScoreCount">{{ moneyInfo.amount }}</span>
            <span class="invScoreTitle">获得奖励(元)</span>
          </view>
        </view>
        <!-- 查看详情 -->
        <view class="scoreButton" @click="handleMyScoreClick"> </view>
      </view>
      <view class="rankingTitle"></view>
      <view class="rankingContainer">
        <view class="rankingBorder">
          <view class="rankingContent">
            <view class="rankingTabs">
              <view class="weekTab" @click="handleRankTabClick('week')"
                >周榜</view
              >
              <view class="monthTab" @click="handleRankTabClick('month')"
                >月榜</view
              >
              <div :class="{ tabMask: true, right: rankType == 'month' }"></div>
            </view>
            <view class="rankingList">
              <view
                :class="{ rankingItem: true, isSelf: index == 0 }"
                v-for="(item, index) in moneyPage"
                :key="index"
              >
                <view class="left">
                  <view class="rankNum">
                    <img
                      class="rankImg"
                      :src="rankImg1"
                      alt="第一名"
                      v-if="item.rank == 1"
                    />
                    <img
                      class="rankImg"
                      :src="rankImg2"
                      alt="第二名"
                      v-else-if="item.rank == 2"
                    />
                    <img
                      class="rankImg"
                      :src="rankImg3"
                      alt="第三名"
                      v-else-if="item.rank == 3"
                    />
                    <span v-else :class="{ noRank: item.rank == '未上榜' }">{{
                      item.rank
                    }}</span>
                  </view>
                  <view class="personInfo">
                    <view class="avatarContainer">
                      <view class="avatar">
                        <img
                          :src="item.personAvatar"
                          alt="用户头像"
                          class="personAvatar"
                        />
                      </view>
                    </view>
                    <view class="info">
                      <view class="personName">
                        <view class="meIcon" v-if="index == 0">我</view>
                        {{ item.personName }}
                      </view>
                      <view class="invCount"
                        >{{ item.inviteSubNum }}次邀请</view
                      >
                    </view>
                  </view>
                </view>
                <view class="rankCount">{{ item.amount }}元</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-modal
        v-model="showRules"
        title="活动规则"
        confirmText="关闭"
        @confirm="showRules = false"
      >
        <view class="slot-content">
          <view class="rulesContainer">
            <p>
              1、好友通过你的链接登录或注册后，即绑定你的账号，成为你的下家；
            </p>
            <br />
            <p>
              2、若好友同时收到两个人邀请链接，根据先来后到原则绑定第一次点击的链接；
            </p>
            <br />
            <p>
              3、好友在一览所购买的专业报告订单，你将获得实际成交金额的10%；
            </p>
            <br />
            <p>
              4、您可在一览职业app>我的>分享赚钱页面查看我的邀请记录和提成奖励，同时也可在该页面申请提现；
            </p>
            <br />
            <p>5、任何以违规手段获得的提成和红包，一览有权没收并封停账号。</p>
          </view>
        </view>
      </u-modal>
      <u-loading-page :loading="loading"></u-loading-page>
    </view>
  </page-wrap>
</template>

<script>
import {
  reqGetShareConfig,
  reqGetShareMoneyInfo,
  reqGetShareMoneyUrl,
  reqShareMoneyPageByTime,
} from "@/api/modules/report";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  data() {
    return {
      showTop: true,
      headerSrc: this.$imgBaseSelf + "/report/header.png", //头部背景
      myScoreImg: this.$imgBaseSelf + "/report/myScoreImg.png", //我的战绩
      ruleImg: this.$imgBaseSelf + "/report/ruleImg.png", //活动规则
      rankImg1: this.$imgBaseSelf + "/report/rankImg1.png", //奖励1
      rankImg2: this.$imgBaseSelf + "/report/rankImg2.png",
      rankImg3: this.$imgBaseSelf + "/report/rankImg3.png",
      titleLeftSrc: this.$imgBaseSelf + "/report/titleLeft.png",
      titleRightSrc: this.$imgBaseSelf + "/report/titleRight.png",
      shareConfig: [],
      moneyPage: [],
      moneyInfo: {},
      showRules: false,
      loading: true,
      personId: "",
      //分享配置
      shareBackground:
        "https://upload.yl1001.com/upload/files/view?file=ATq7E6RGJAygJNxdouib6NP87,5nx0ELUAxCn04Mvh0o5s7p_iz4N4rPlUEmE.png",
      shareTitle: "志愿填报不用愁，好友邀请你一起查看《专业报告》",
      // sharePath: "/pages/report/index",
      rankType: "week",
      timeBegin: "",
      timeEnd: "",
    };
  },

  created() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    // 使用方式
    const { timeBegin, timeEnd } = this.getThisWeekRange();
    this.timeBegin = timeBegin;
    this.timeEnd = timeEnd;
    this.getShareMoney();
    this.sharePath = `/pages/career/index?tab=1&sharePersonId=${this.personId}`;
  },
  // // 点击分享
  // onShareAppMessage(res) {
  //   this.getShareInfo();
  //   return {
  //     title: this.shareTitle,
  //     imageUrl: this.shareBackground,
  //     path: `${this.sharePath}?sharePersonId=${this.personId}`,
  //   };
  // },
  // // 分享到朋友圈
  // onShareTimeline() {
  //   this.getShareInfo();
  //   return {
  //     title: this.shareTitle,
  //     imageUrl: this.shareBackground,
  //     path: `${this.sharePath}?sharePersonId=${this.personId}`,
  //   };
  // },
  methods: {
    // 日期格式化工具
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 获取本周范围
    getThisWeekRange() {
      const now = new Date();
      const today = now.getDay();
      const daysToMonday = today === 0 ? -6 : 1 - today;

      const monday = new Date(now);
      monday.setDate(now.getDate() + daysToMonday);
      monday.setHours(0, 0, 0, 0);

      const sunday = new Date(monday);
      sunday.setDate(monday.getDate() + 6);
      sunday.setHours(23, 59, 59, 999);

      return {
        timeBegin: this.formatDateTime(monday),
        timeEnd: this.formatDateTime(sunday),
      };
    },

    // 获取本月范围
    getThisMonthRange() {
      const now = new Date();
      const firstDay = new Date(
        now.getFullYear(),
        now.getMonth(),
        1,
        0,
        0,
        0,
        0
      );
      const lastDay = new Date(
        now.getFullYear(),
        now.getMonth() + 1,
        0,
        23,
        59,
        59,
        999
      );

      return {
        timeBegin: this.formatDateTime(firstDay),
        timeEnd: this.formatDateTime(lastDay),
      };
    },
    handleRankTabClick(type) {
      if (type == "week") {
        this.rankType = type;
        // 使用方式
        const { timeBegin, timeEnd } = this.getThisWeekRange();
        this.timeBegin = timeBegin;
        this.timeEnd = timeEnd;
        console.log("-------------------->时间", this.timeBegin, this.timeEnd);
      } else {
        this.rankType = type;
        // 使用方式
        const { timeBegin, timeEnd } = this.getThisMonthRange();
        this.timeBegin = timeBegin;
        this.timeEnd = timeEnd;
      }

      this.getRankList();
    },
    getRankList() {
      const paramsNew = {
        moduleType: "OCCUPATION_MODULE_TYPE",
        personId: this.personId,
        createTimeBegin: this.timeBegin,
        createTimeEnd: this.timeEnd,
      };
      this.loading = true;
      // reqGetShareMoneyPage(params)
      reqShareMoneyPageByTime(paramsNew, this.personId)
        .then((res) => {
          if (res.code == 200) {
            this.moneyPage = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 分享数据埋点
    getShareInfo() {
      reqGetShareMoneyUrl(
        {
          sharePersonId: this.personId,
          moduleType: "OCCUPATION_MODULE_TYPE",
        },
        this.personId
      )
        .then((res) => {
          // console.log("分享成功")
        })
        .catch((e) => {
          console.log(e);
          uni.showToast({
            title: "分享失败，请联系客服人员",
            duration: 2000,
            icon: "none",
          });
        });
    },
    getShareMoney() {
      const params = {
        moduleType: "OCCUPATION_MODULE_TYPE",
        personId: this.personId,
      };
      const rankParamsNew = {
        ...params,
        createTimeBegin: this.timeBegin,
        createTimeEnd: this.timeEnd,
      };
      this.loading = true;

      Promise.allSettled([
        reqGetShareConfig(params, this.personId),
        // reqGetShareMoneyPage(params, this.personId),
        reqShareMoneyPageByTime(rankParamsNew, this.personId),
        reqGetShareMoneyInfo(params, this.personId),
      ])
        .then((resArr) => {
          const configRes = resArr[0];
          const moneyPage = resArr[1];
          const moneyInfo = resArr[2];
          if ((configRes.status = "fulfilled")) {
            this.shareConfig = configRes.value.data;
          }
          if ((moneyPage.status = "fulfilled")) {
            this.moneyPage = moneyPage.value.data;
          }
          if ((moneyInfo.status = "fulfilled")) {
            this.moneyInfo = moneyInfo.value.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleRuleClick() {
      this.showRules = true;
    },
    handleMyScoreClick() {
      uni.navigateTo({
        url: `/pagesSub/userCenter/shareActivity/myScore`,
      });
    },
  },
};
</script>

<style lang="scss">
// view {
//   width: 100%;
// }
// page {
//   width: 100%;
//   height: 100%;
//   background-color: #4223c5;
// }
.container {
  height: 100%;
  background-color: #4223c5;
  .header {
    position: relative;
    width: 100%;
    font-size: 0px;
    .ruleImg {
      position: absolute;
      top: 0;
      right: 45rpx;
      width: 76rpx;
      height: 83rpx;
    }
    .myScoreImg {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 169rpx;
      height: 85rpx;
    }
  }
  .award {
    width: 100%;
    height: 470rpx;
    background-image: url($img-base + "/report/awardBG.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 0 0;
    .invContainer {
      width: 100%;
      height: 470rpx;
      background-image: url($img-base + "/report/invBG1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .invContent {
        padding-top: 138rpx;
        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 34rpx;
          span {
            color: #ffffff;
            font-family: Inter;
            font-weight: regular;
            font-size: 28rpx;
            line-height: normal;
            letter-spacing: 0px;
            text-align: left;
            margin: 0 32rpx;
          }
          .titleIcon {
            height: 17rpx;
            width: 179rpx;
          }
        }
        .bonus {
          display: flex;
          justify-content: center;
          min-height: 290rpx;
          margin-top: 8rpx;
          .bonusItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 218rpx;
            height: 257rpx;
            color: #ffffff;
            font-family: PingFangSC;
            font-weight: medium;
            font-size: 24rpx;
            letter-spacing: 0px;
            text-align: left;
            padding-top: 20rpx;
            .bonusTop {
              height: 70rpx;
              .received {
                display: inline-block;
                margin-top: 30rpx;
                font-size: 36rpx;
              }
              .bonusNum {
                font-size: 56rpx;
                font-weight: bold;
                margin-right: 4rpx;
              }
            }
          }
          .bonusItem1 {
            background-image: url($img-base + "/report/bonus1.png");
            background-size: 95% 95%;
            background-repeat: no-repeat;
            background-position: center center;
          }
          .bonusItem2 {
            background-image: url($img-base + "/report/bonus2.png");
            background-size: 95% 95%;
            background-repeat: no-repeat;
            background-position: center center;
          }
          .bonusItem3 {
            background-image: url($img-base + "/report/bonus3.png");
            background-size: 95% 95%;
            background-repeat: no-repeat;
            background-position: center center;
          }
        }
        .bonus2 {
          height: 176rpx;
          width: 643rpx;
          background-image: url($img-base + "/report/bonus4.png");
          background-size: 100% 100%;
          margin: 0 auto;
          background-repeat: no-repeat;
        }
      }
    }
  }
  .invButton {
    width: 687rpx;
    height: 123rpx;
    background-image: url($img-base + "/report/invButton.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    // margin: -35rpx auto 0;
  }
  button {
    background: none;
  }
  button::after {
    background: none;
    border: none;
  }
  .score {
    width: 100%;
    height: 534rpx;
    background-image: url($img-base + "/report/scoreBg.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    // margin-top: -35rpx;
    // padding-top: 138rpx;
    .scoreList {
      display: flex;
      justify-content: center;
      padding-top: 130rpx;
      .scoreItem {
        display: flex;
        flex-direction: column;
        width: 202rpx;
        height: 189rpx;
        background-image: url($img-base + "/report/scoreItem.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 26rpx 0 0;
        .invScoreCount {
          min-height: 70rpx;
          color: #3a23a5;
          font-family: DIN Alternate;
          font-weight: bold;
          font-size: 54rpx;
          line-height: normal;
          letter-spacing: 0px;
          text-align: center;
          margin-bottom: 35rpx;
        }
        .invScoreTitle {
          color: #ffffff;
          font-family: PingFangSC;
          font-weight: semibold;
          font-size: 26rpx;
          line-height: normal;
          letter-spacing: 0px;
          text-align: center;
        }
      }
      .scoreItem2 {
        margin: 0 10rpx;
      }
    }
    .scoreButton {
      width: 644rpx;
      height: 123rpx;
      background-image: url($img-base + "/report/scoreButton.png");
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }
  }
  .rankingTitle {
    width: 100%;
    height: 94rpx;
    background-image: url($img-base + "/report/rankingTitle.png");
    background-size: 363rpx 94rpx;
    background-position: top center;
    margin-top: -25rpx;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    float: left;
  }
  .rankingContainer {
    width: auto;
    // height: 900rpx;
    padding: 0 32rpx;
    .rankingBorder {
      //边框是用两个容器的背景图做的
      border-radius: 56rpx;
      background: #7460ec;
      padding: 6rpx 6rpx 0;
      margin-bottom: 24rpx;
      .rankingContent {
        width: auto;
        border-radius: 52rpx;
        background: linear-gradient(90.42deg, #5b1cda 0%, #3633cf 100%);
        box-shadow: 0px 0px 6px 0px #0000003f;
        // height: 900rpx;
        min-height: 250rpx;
        padding: 85rpx 15rpx 85rpx;
        .rankingTabs {
          display: flex;
          position: relative;
          width: 360rpx;
          height: 72rpx;
          border-radius: 40px;
          background: #ffffff14;
          border: 1px solid #ffffff26;
          margin: 0 auto 40rpx;
          view {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            border-radius: 40rpx;
            color: #ffffff;
            font-family: PingFangSC;
            font-weight: semibold;
            font-size: 28rpx;
            line-height: normal;
            letter-spacing: 0rpx;
            text-align: left;
          }
          .weekTab {
          }
          .monthTab {
          }
          .tabMask {
            position: absolute;
            width: 50%;
            left: 0rpx;
            border-radius: 40rpx;
            height: 72rpx;
            background: #ffffff19;
            border: 1rpx solid #ffffff4c;
            transition: left 0.2s;
          }
          .tabMask.right {
            left: 180rpx;
          }
        }
        .rankingList {
          width: auto;
          .rankingItem {
            width: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: auto;
            height: 157rpx;
            color: #ffffff;
            font-family: DIN Alternate;
            font-size: 34rpx;
            line-height: normal;
            letter-spacing: 0rpx;
            text-align: left;
            padding-left: 23rpx;
            padding-right: 31rpx;
            .left {
              display: flex;
              .rankNum {
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 78rpx;
                width: auto;
                margin-right: 25rpx;
                .rankImg {
                  width: 42rpx;
                  height: 28rpx;
                }
                .noRank {
                  font-size: 24rpx;
                }
              }
              .personInfo {
                display: flex;
                width: auto;
                .avatarContainer {
                  width: 100rpx;
                  height: 100rpx;
                  background-image: linear-gradient(
                    132.03deg,
                    #b400ff 0%,
                    #428eff 100%
                  );
                  margin-right: 18rpx;
                  border-radius: 50%;
                  padding: 4rpx;
                  .avatar {
                    width: 100%;
                    height: 100%;
                    img {
                      border-radius: 50%;
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
                .info {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  flex-wrap: wrap;
                  width: auto;
                  .personName {
                    display: flex;
                    align-items: center;
                    width: auto;
                    font-weight: bold;
                    font-family: PingFangSC, sans-serif;
                    font-size: 28rpx;
                    .meIcon {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 32rpx;
                      height: 32rpx;
                      border-radius: 5px;
                      background: linear-gradient(
                        180deg,
                        #00c2ff 0%,
                        #0085ff 100%
                      );
                      color: #ffffff;
                      font-family: PingFangSC;
                      font-weight: medium;
                      font-size: 24rpx;
                      line-height: 24rpx;
                      letter-spacing: 0rpx;
                      text-align: left;
                      margin-right: 8rpx;
                    }
                  }
                  .invCount {
                    width: auto;
                    opacity: 0.5;
                    font-family: PingFangSC, sans-serif;
                    font-size: 28rpx;
                  }
                }
              }
            }
            .rankCount {
              display: flex;
              width: unset;
              font-family: PingFangSC, sans-serif;
              color: #fce27c;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
          .isSelf {
            border-radius: 24rpx;
            background: #ffffff14;
            border: 2px solid #ffffff26;
          }
        }
      }
    }
  }
}
img {
  width: 100%;
}
.rulesContainer {
  font-size: 28rpx;
  color: #222;
  padding: 28rpx 48rpx 28rpx 48rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  p {
    line-height: 40rpx;
    margin-top: 15rpx;
  }
}
.u-border-top:after {
  border-top-width: 4rpx;
}
::v-deep .u-modal__title {
  color: #222;
}
</style>
